<!DOCTYPE HTML>
<html>
<head>
    <title>功能管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css"/>
    <!--ztree-->
    <link rel="stylesheet" href="../../../assets/tools/ztree/css/metroStyle/metroStyle.css" type="text/css">
    <style>
        .ztree li span.button.roots_open, .ztree li span.button.bottom_open, .ztree li span.button.bottom_close, .ztree li span.button.center_docu, .ztree li span.button.bottom_docu {
            -webkit-box-shadow：none;
            box-shadow: none;
        }

        .ztree li a.curSelectedNode {
            height: 30px;
        }

        .ztree li span.button:hover, .button-hover {

            -webkit-transition: none;
            -moz-transition: none;
            -ms-transition: none;
            transition: none;
        }

        .ztree * {
            font-size: 16px;
        }

        .ztree {
            margin-left: 100px;
        }

        .ztree li {
            line-height: 30px;
        }

        .ztree li span {
            line-height: 25px;
            margin-right: 2px;
        }

        .ztree li a.operation {
            padding: 0px 10px 0px 10px;
            margin: 0;
            cursor: pointer;
            height: 21px;
            font-size: 14px;
            color: #36c;
            text-decoration: underline;
            vertical-align: top;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="detail-page span24">
        <div class="detail-page-title">
            <h4>功能管理
                <button type="button" id="add-fun-btn" class="pull-right jx-btn btn-default">新增功能</button>
            </h4>
        </div>
        <div class="detail-section">
            <div class="detail-row">
                <h3><label class="control-label offset2">等级名称：普通版</label></h3>
                <ul id="treeView" class="ztree"></ul>
            </div>
        </div>
    </div>
</div>
<!-- 此节点内部的内容会在弹出框内显示,默认隐藏此节点-->
<div id="content" class="hide">
    <form id="form" class="jx-form  form-horizontal">
        <div class="row">
            <div class="control-group span8">
                <label class="control-label">上级节点:</label>
                <div class="controls">
                    <select class="input-normal">
                        <option value="">/</option>
                        <option></option>
                        <option></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span8">
                <label class="control-label">功能名称:</label>
                <div class="controls">
                    <input type="text" class="input-large control-text" data-rules="{required : true}">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span8">
                <label class="control-label">功能类名:</label>
                <div class="controls">
                    <input type="text" class="input-large control-text" data-rules="{required : true}">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span8">
                <label class="control-label">映射路径:</label>
                <div class="controls">
                    <input type="text" class="input-large control-text" data-rules="{required : true}">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span8 mb">
                <label class="control-label">&nbsp;</label>
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox" class="bui-form-field-checkbox bui-form-check-field bui-form-field"
                               aria-disabled="false" value="">归入菜单
                    </label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span8">
                <label class="control-label">&nbsp;</label>
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox" class="bui-form-field-checkbox bui-form-check-field bui-form-field"
                               aria-disabled="false" value="">顶级权限
                    </label>
                </div>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
<script type="text/javascript" src="../../../assets/js/config-min.js"></script>
<!--ztree-->
<script type="text/javascript" src="../../../assets/tools/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../assets/tools/ztree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../assets/tools/ztree/js/jquery.ztree.exedit.js"></script>

<script type="text/javascript">
    BUI.use('common/page');
    $(function () {
        //关闭当前页
        $("#back-btn").click(function () {
            top.topManager.closePage();
        })
    });


</script>
<!-- script start -->
<SCRIPT LANGUAGE="JavaScript">
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        // check: {enable: true},//可勾线
        chkboxType: {"Y": "ps", "N": "ps"},//选中取消时父子关系
        view: {
            selectedMulti: false,
            showIcon: false,
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom
        },
        callback: {
            beforeRemove: beforeRemove
        }
    };
    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    var zNodes = [
        {
            id: '1',
            name: "SunTech",
            open: true,
            children: [
                {
                    id: "11",
                    name: "品牌管理",
                    open: true,
                    children: [
                        {id: "111", name: "品牌管理—编辑折扣", checked: true},
                        {id: "112", name: '品牌管理—品牌上下架'}]
                },
            ]
        }, {
            id: "2", name: "员工", checked: true
        }, {
            id: "3", name: "订单"
        }

    ];
    //获取选中的
    function getNodes() {
        var zTree = $.fn.zTree.getZTreeObj("treeView");
        return zTree.getCheckedNodes(true);
    }
    //滑动显示
    function addHoverDom(treeId, treeNode) {
        var aObj = $("#" + treeNode.tId + "_a");
        //如果鼠标滑动出去还存在动态添加的节点就返回
        if ($("#diyBtn1_" + treeNode.id).length > 0) return;
        if ($("#diyBtn2_" + treeNode.id).length > 0) return;
        if ($("#diyBtn3_" + treeNode.id).length > 0) return;

        var editStr = "<a id='diyBtn1_" + treeNode.id + "' class='operation' onclick='nodeEdit()' >编辑</a>" +
            "<a id='diyBtn2_" + treeNode.id + "' class='operation' onclick='nodeRemove(" + treeNode.tId + ")' >删除</a>" +
            "<a id='diyBtn3_" + treeNode.id + "' class='operation' onclick='nodeAdd()' >新增</a>";
        aObj.append(editStr);
    }
    function removeHoverDom(treeId, treeNode) {
        $("#diyBtn1_" + treeNode.id).unbind().remove();
        $("#diyBtn2_" + treeNode.id).unbind().remove();
        $("#diyBtn3_" + treeNode.id).unbind().remove();
    }

    $(document).ready(function () {
        zTreeObj = $.fn.zTree.init($("#treeView"), setting, zNodes);
        $("#submit-btn").click(function () {
            var obj = getNodes();
            // console.log(obj);
        });
    });
    //添加新功能
    $("#add-fun-btn").click(function () {
        dialog.show();
    });
    //编辑功能
    function nodeEdit() {
        dialog.show();
    }
    //删除功能
    function nodeRemove(e) {
        var zTree = $.fn.zTree.getZTreeObj("treeView");
        var node = zTree.getNodeByTId($(e).attr("id"));
        zTree.removeNode(node, true);
    }

    function beforeRemove(treeId, treeNode) {


        return confirm("确认删除[" + treeNode.name + "]功能吗？");
    }
    function nodeAdd() {
        dialog.show();
    }

    var Overlay = BUI.Overlay
    var dialog = new Overlay.Dialog({
        title: '添加功能',
        width: 450,
        height: 400,
        contentId: 'content',
        success: function () {

        }
    });
</SCRIPT>
<!-- script end -->

<body>

</html>
